import { ETextureDirection, Point3 } from '@/types';
import { Euler } from 'three';
import { degToRad } from 'three/src/math/MathUtils';
import { ArrowLine } from './ArrowLine';

export function BaseTextureDirection(props: {
  thickness: number;
  textureDirection: string;
}) {
  const { thickness, textureDirection } = props;
  const z = thickness / 2;
  const startPoint: Point3 = [0, 0, z];
  const endPoint: Point3 = [100, 0, z];
  const color = 'red';
  const rotation = new Euler(
    0,
    0,
    ETextureDirection.Horizontal === textureDirection ? 0 : degToRad(90),
  );

  return (
    <group rotation={rotation}>
      <ArrowLine {...{ startPoint, endPoint, color }} />;
      <group rotation={new Euler(0, 0, degToRad(180))}>
        <ArrowLine {...{ startPoint, endPoint, color }} />;
      </group>
    </group>
  );
}
